<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$templateTitle}</title>
    <link rel="stylesheet" href="__PUBLIC__/home/css/common.css?_t={:time()}">
    <link rel="stylesheet" href="__PUBLIC__/home/css/swiper.min.css">
    <link rel="stylesheet" href="__PUBLIC__/home/css/font-awesome.min.css">
    <script src="__PUBLIC__/home/js/jquery.js"></script>
    <script src="__PUBLIC__/home/js/swiper.min.js"></script>
    <script src="__PUBLIC__/vendors/layer/mobile/layer.js"></script>
    <script src="__PUBLIC__/home/js/iscroll4.js"></script>
    <script src="__PUBLIC__/home/js/base64.js"></script>
    <style>
        #wrapper {
            position: absolute;
            top: 1px;
            bottom: 1px;
            left: 0;
            width: 100%
        }
        #pullDown,#endData,
        #pullUp {
            padding: 0 10px;
            height: 44px;
            line-height: 44px;
            color: #888;
            text-align: center
        }
    </style>

</head>
<script>
    var modal = {};
    modal.alert = function(content, btnText='确定', callback){
        if(typeof btnText == 'function'){
            layer.open({
                content:content,
                btn:["确定"],
                yes:function(index){
                    layer.close(index);
                    btnText();
                }
            });
        }else{
            layer.open({
                content:content,
                btn:[btnText],
                yes:function(index){
                    layer.close(index);
                    if(typeof callback == "function"){
                        callback();
                    }
                }
            });
        }
    }

    modal.msg = function (content, times=2, site="msg") {
        layer.open({
            content:content,
            skin:"msg",
            time:times
        })
    }
    
    modal.confirm = function (content, confirmText='确定', confirmCallBack, cancelText='取消', cancelCallBack=function () {}) {
        layer.open({
            content: content,
            btn: [confirmText, cancelText],
            yes: function(index){
                confirmCallBack();
                layer.close(index);
            },
            no:function (index) {
                cancelCallBack();
                layer.close(index);
            }
        });
    }

    modal.loading = function (content) {
        let index = layer.open({
            type: 2
            ,content: content
        });
        return index;
    }

    modal.close = function (index) {
        layer.close(index);
    }

    /**
     *此方法可以写到公用的类里面，然后调用 ,
     * 下拉刷新的id一定要是 【pullDown】，上拉加载的id一定要是【pullUp】
     *
     * 用iScroll4.js实现上拉加载和下拉刷新
     * @param wrapperId 滚动容器的 elementId
     * @param callbc  滚动回调，参数：refresh 表示下拉刷新，loadmore 表示上拉加载
     *
     * @return myScroll 将对象返回（注意，在执行完成数据刷新/加载之后要调用 myScroll.refresh(),否则会上拉会反弹）
     */
    function PullDownAddUP(wrapperId, callbc) {
        var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
        var isRefresh = true,
            isLoadMore = true;
        var option = {};
        option.hScrollbar = false;//纵向滚动条
        option.vScrollbar = false;//横向滚动条
        option.useTransition = true;



        //动画部分
        try {
            pullDownEl = document.getElementById('pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
        } catch (e) {
            isRefresh = false;
        }
        try {
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;
        } catch (e) {
            isLoadMore = false;
        }

        if (isRefresh) {
            if (isLoadMore) {
                option.onRefresh = function() {
                    if (pullDownEl.className.match('loading')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                    } else if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                    }
                };
                option.onScrollMove = function() {

                    // console.log(this.y,"========",this.maxScrollY);
                    // console.log("###########");
                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        // console.log("222222222");
                        pullDownEl.className = 'flip';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新';
                        this.minScrollY = 0;
                    } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        this.minScrollY = -pullDownOffset;
                    } else if (this.y <  - 5 && !pullUpEl.className.match('flip')) {

                        // console.log("3333333");
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        this.maxScrollY = pullUpOffset;
                    }
                };
                option.onScrollEnd = function() {
                    if (pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'loading';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';
                        callbc("refresh"); // Execute custom function (ajax call?)
                    } else if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';
                        callbc("loadmore"); // Execute custom function (ajax call?)
                    }
                };
            } else {
                option.onRefresh = function() {
                    if (pullDownEl.className.match('loading')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                    }
                };
                option.onScrollMove = function() {

                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新';
                        this.minScrollY = 0;
                    } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                        this.minScrollY = -pullDownOffset;
                    }
                };
                option.onScrollEnd = function() {
                    if (pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'loading';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中';
                        callbc("refresh"); // Execute custom function (ajax call?)
                    }
                };
            }
        } else {
            if (isLoadMore) {
                option.onRefresh = function() {
                    if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                    }
                };
                option.onScrollMove = function() {
                    if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        this.maxScrollY = pullUpOffset;
                    }
                };
                option.onScrollEnd = function() {
                    if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';
                        callbc("loadmore"); // Execute custom function (ajax call?)
                    }
                };
            } else {
                option.onRefresh = function() {
                    if (pullDownEl.className.match('loading')) {
                    	pullDownEl.className = '';
                    	pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                    }
                };

            }
        }
        myScroll = new iScroll('wrapper', option);
        return myScroll;
    }

</script>
<script>
    function showBig(o){
        let src = $(o).attr('src');
        let _div = '\n' +
            '\t<div style=\'position: absolute; display: table; top:0; left: 0; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,0.5);\' onclick="$(this).remove()">\n' +
            '\t\t<div style="width: 100%; display: table-cell; vertical-align: middle;">\n' +
            '\t\t\t<img src="'+src+'" alt="" style="width: 100%;">\n' +
            '\t\t</div>\n' +
            '\t</div>';
        $("body").append(_div);
    }


</script>